<template>
    <transition name="modal">
        <div class="modal-mask" v-show="open">
                <div class="modal-container">

                    <div class="modal-header">
                        <div class="row">
                            <div class="col-lg-12">
                                <h4>编辑产品</h4>
                            </div>

                        </div>


                        <button type="button" class="close" @click="$emit('close')">
                            <i class="fa fa-times" aria-hidden="true"></i>
                        </button>
                    </div>

                    <div class="modal-body">
                        <div class="row limte-height">
                            <div class="col-lg-12">
                                <div class="form-horizontal">
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">编码：</label>
                                        <div class="col-sm-2">
                                            <p class="form-control-static">{{code_id}}</p>
                                        </div>
                                        <label class="col-sm-2 control-label">商品名称：</label>
                                        <div class="col-sm-2">
                                            <input type="text" v-model="name" class="form-control">
                                        </div>
                                        <label class="col-sm-2 control-label">商品类型：</label>
                                        <div class="col-sm-2">
                                            <select class="form-control" v-model="goods_type_ids">
                                                <option v-for="(item,i) in $root.GOOD_TYPES" :key="i" :value="item.id">{{item.name}}</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-1 control-label">图1：</label>
                                        <div class="col-sm-2">
                                            <FileInput v-model="pic1" file-input-name="fileArray"></FileInput>
                                        </div>
                                        <label class="col-sm-1 control-label">图2：</label>
                                        <div class="col-sm-2">
                                            <FileInput v-model="pic2" file-input-name="fileArray"></FileInput>
                                        </div>
                                        <label class="col-sm-1 control-label">图3：</label>
                                        <div class="col-sm-2">
                                            <FileInput v-model="pic3" file-input-name="fileArray"></FileInput>
                                        </div>
                                        <label class="col-sm-1 control-label">图4：</label>
                                        <div class="col-sm-2">
                                            <FileInput v-model="pic4" file-input-name="fileArray"></FileInput>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-1 control-label">图5：</label>
                                        <div class="col-sm-2">
                                            <FileInput v-model="pic5" file-input-name="fileArray"></FileInput>
                                        </div>
                                        <label class="col-sm-1 control-label">图6：</label>
                                        <div class="col-sm-2">
                                            <FileInput v-model="pic6" file-input-name="fileArray"></FileInput>
                                        </div>
                                        <label class="col-sm-1 control-label">图7：</label>
                                        <div class="col-sm-2">
                                            <FileInput v-model="pic7" file-input-name="fileArray"></FileInput>
                                        </div>
                                        <label class="col-sm-1 control-label">图8：</label>
                                        <div class="col-sm-2">
                                            <FileInput v-model="pic8" file-input-name="fileArray"></FileInput>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-1 control-label">视频：</label>
                                        <div class="col-sm-11">
                                            <input type="text" v-model="video" class="form-control">
                                        </div>
                             
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-1 control-label">价格：</label>
                                        <div class="col-sm-2">
                                            <input type="number" v-model="price" class="form-control">
                                        </div>
                                        <label class="col-sm-1 control-label">优惠价格：</label>
                                        <div class="col-sm-2">
                                            <input type="number" v-model="preferential_price" class="form-control">
                                        </div>
                                        <label class="col-sm-1 control-label">初始数量：</label>
                                        <div class="col-sm-2">
                                            <input type="number" v-model="qty" class="form-control">
                                        </div>
                                        <label class="col-sm-1 control-label">条码：</label>
                                        <div class="col-sm-2">
                                            <input type="number" v-model="code_id" class="form-control">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">商品内容：</label>
                                        <div class="col-sm-10">
                                            <WYSIWYGinput ref="wys" v-model="content"></WYSIWYGinput>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" @click="save"> 保 存 </button>
                        <button type="button" class="btn btn-default" @click="$emit('close')"> 取 消 </button>
                    </div>
                </div>
            
        </div>
    </transition>
</template>
<script>
    import {
        tip,
        ajax
    } from '../../tools/tools.js'
    import WYSIWYGinput from '../../components/WYSIWYGinput.vue'
    import FileInput from '../../components/FileInput.vue'
    import { Base64 } from 'js-base64';

    export default {
        name: 'EditGoodsModal',
        components: {
            WYSIWYGinput,FileInput
        },
        data() {
            return {
                name:'',
                code_id:'',
                goods_type_ids:'',
                content: {
                    chg:true,
                    val:''
                },

                s_type:'',
                s_content:'',

                picture:'',
                pic1:'',
                pic2:'',
                pic3:'',
                pic4:'',
                pic5:'',
                pic6:'',
                pic7:'',
                pic8:'',

                qty:200,
                preferential_price:0,
                price:0,
                video:'',
                code_id:''
            }
        },
        props: {
            open: {
                type: Boolean,
                default: false
            },
            id:{
                type: String,
                default:''
            }
        },
        computed: {

        },
        watch: {
            open(v, ov) {
                if(v==true){
                    this.clearData();
                    this.getGood();
                } else {
                    this.clearData();
                }
            }
        },
        methods: {
            clearData(){
                this.name = '';
                this.code_id = '';
                this.goods_type_ids = '';
                this.content =  {
                    chg:true,
                    val:''
                };
                this.$refs.wys.chgVal('');

                this.picture = '';
                this.pic1 = '';
                this.pic2 = '';
                this.pic3 = '';
                this.pic4 = '';
                this.pic5 = '';
                this.pic6 = '';
                this.pic7 = '';
                this.pic8 = '';

                this.qty = 0;
                this.preferential_price = 0;
                this.price = 0;
                this.video = '';
            },
            getGood(){
                var self = this;
                ajax.goodsInfo({
                    param:{
                        id:self.id,
                        token:self.$root.TOKEN
                    },
                    cb(data){
                        self.name = data.data.name;
                        self.code_id = data.data.codeId;
                        self.goods_type_ids = data.data.goodsTypes[0].id;
                        self.qty = data.data.qty;
                        self.price = data.data.price;
                        self.preferential_price = data.data.preferentialPrice;
                        self.video = JSON.parse(data.data.video).toString();
                        self.content = {
                            val:data.data.content?Base64.decode(data.data.content):'',
                            chg:true
                        }

                        var pic_arr = data.data.picture?data.data.picture.split(','):['','',''];
                        pic_arr.forEach((v,i,arr) => {
                            self['pic'+(i+1)] = v;
                        });
                        self.code_id = data.data.codeId;
                    }
                })
            },
            save() {
                var self = this;
                if(self.name.trim()==''){tip.warn('菜名未填');return;}
                if(self.price==0){tip.warn('价格不可为0');return;}
                if(self.content.val.trim()==''){tip.warn('内容未填');return;}

                var pic_arr = [];
                ['pic1','pic2','pic3','pic4','pic5','pic6','pic7','pic8'].forEach((v,i)=>{
                    if(self[v]!='')pic_arr.push(self[v]);
                })

                self.picture = pic_arr.join(',');
                if(self.picture.length==0)tip.warn('至少上传一张图片')

                var dname = Base64.encode(self.name);

                var content = Base64.encode(self.content.val)
                content = content.replace(new RegExp("\\+","gi"),"_a");
                content = content.replace(new RegExp("/","gi"),"_b");
                content = content.replace(new RegExp("=","gi"),"_c");

                ajax.goodsEdit({
                    type:'post',
                    param: {
                        'goodsInfo.id':self.id,
                        'goodsInfo.price':self.price,
                        'goodsInfo.preferentialPrice':self.preferential_price,
                        'goodsInfo.qty':self.qty,
                        'goodsTypeIds':self.goods_type_ids,
                        'goodsInfo.video':self.video==''?'[]':JSON.stringify(self.video.split(',')),
                        'token':self.$root.TOKEN,
                        'goodsInfo.name':self.name,
                        'goodsInfo.picture':Base64.encode(self.picture),
                        'goodsInfo.content':content,
                        'goodsInfo.sType':'1',
                        'goodsInfo.codeId':self.code_id
                    },
                    cb(data) {
                        tip.info(`编辑菜品 ${self.name} 成功`);
                        self.$emit('editdone');
                    }
                })
            },
            getHtml(v){
                return v.replace(/\\/g,'');
            }
        },
        mounted() {

        }
    }
</script>
<style scoped>
    .close {
        position: absolute;
        right: 30px;
        top: 30px;
    }

    .modal-mask {
        position: fixed;
        z-index: 10001;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-color: rgba(0, 0, 0, .5);
        transition: opacity .3s ease;
    }

    .limte-height {
        max-height: 550px;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .modal-container {
        position: absolute;
        left: 210px;
        top: 70px;
        bottom: 20px;
        right: 20px;
        padding: 20px 30px;
        background-color: #fff;
        border-radius: 2px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
        transition: all .3s ease;
        overflow-y: auto;
    }

    .modal-header h3 {
        margin-top: 0;
        color: #42b983;
    }

    .modal-default-button {
        float: right;
    }

    .modal-enter {
        opacity: 0;
    }

    .modal-leave-active {
        opacity: 0;
    }

    .modal-enter .modal-container,
    .modal-leave-active .modal-container {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
</style>